<template>
    <div class="base-width m-auto swiper-box" @mouseleave="currentIndex = -1">
        <swiper @mouseenter="currentIndex = -1" class="h-full" @swiper="onSwiper"
            :modules="[Navigation, Pagination, A11y, Autoplay]" :autoplay="{ delay: 5000, disableOnInteraction: false }"
            :loop="true" navigation :pagination="{ clickable: true }" @slideChange="onSlideChange">
            <swiper-slide>
                <img src="../img/banner1.3279c3ec.jpg" />
            </swiper-slide>
            <swiper-slide>
                <img src="../img/banner2.0f796789.webp" />
            </swiper-slide>
            <swiper-slide>
                <img src="../img/banner3.617de419.webp" />
            </swiper-slide>
            <swiper-slide>
                <img src="../img/banner4.23990594.webp" />
            </swiper-slide>
            <swiper-slide>
                <img src="../img/banner5.587fcd71.webp" />
            </swiper-slide>
            <swiper-slide>
                <img src="../img/banner6.f20af6e1.webp" />
            </swiper-slide>
        </swiper>
        <ul class="list-type">
            <li v-for="(item, index) in topProductsInfoList" :key="item.id" @mouseenter="currentIndex = index">
                <a href="#" @click="toSearch(item.products_id)">{{ item.products_name }}</a>
            </li>
        </ul>
        <!--    右边展现出的商品列表-->
        <div class="goods-list" v-for="(item, index) in topProductsInfoList" :key="item.id"
            v-show="currentIndex === index">
            <div class="goods-item" v-for="g_item in item.goodsList.slice(0, 24)" :key="g_item.id"
                @click="toGoodsDetail(g_item)">
                <img :src="baseURL + g_item.goods_photo[0]" class="g-img" alt="">
                <span>{{ g_item.goods_name }}</span>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, inject } from "vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y, Autoplay } from 'swiper';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import API from "../utils/API";
import { useRouter } from "vue-router";

const router = useRouter();
const baseURL = inject("baseURL");

//获取轮播图里面的数据中的一分发类及下面的商品
const topProductsInfoList = ref([])
const getTopProductsInfoListAndGoods = () => {
    API.productsInfo.getTopProductsInfoListAndGoods()
        .then(result => {
            topProductsInfoList.value = result;
        })
        .finally(() => {

        })
}
getTopProductsInfoListAndGoods();

let currentIndex = ref(-1)

const onSwiper = (swiper) => {

};
const onSlideChange = () => {

};


const toGoodsDetail = (item) => {
    window.open(router.resolve({ name: "goodsDetail", params: { id: item.id } }).href);
}

const toSearch = products_id => {
    console.log(products_id);
    window.open(router.resolve({ name: "search", query: { products_id } }).href);
}

</script>
  
<style scoped lang="scss">
.swiper-box {
    height: 460px;
    position: relative;

    .list-type {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .5);
        padding: 20px 0;
        width: 234px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        z-index: 2;

        >li {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            color: #fff;
            font-size: 14px;
            @apply flex flex-row items-center;

            &:hover {
                background-color: #ff6700;
            }

            a {
                flex: 1;
            }

            &::after {
                content: ">";
                font-weight: bold;
            }
        }
    }

    .goods-list {
        position: absolute;
        left: 234px;
        top: 0;
        right: 0;
        height: 100%;
        overflow: hidden;
        z-index: 2;
        background-color: #fff;
        display: grid;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: column;
        align-self: center;
        width: min-content;
        box-shadow: 0 0 10px lightgray;

        .goods-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 10px;
            width: 265px;
            height: 76px;
            color: black;
            line-height: 1.7;
            font-size: 14px;

            &:hover {
                color: #ff6700;
                cursor: pointer;
            }

            .g-img {
                width: 40px;
                height: 40px;
                margin: 0 20px;
            }
        }
    }

    :deep(.swiper-button-prev) {
        left: 250px;
    }
}
</style>